<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h1>{{ count }}</h1>
  <h1>{{ double }}</h1>
<!--  <ul>-->
<!--    <li v-for="number in numbers" :key="number"><h1>{{ number }}</h1></li>-->
<!--  </ul>-->
<!--  <h1>{{ person.name }}</h1>-->
  <h1>{{ error }}</h1>
  <Suspense>
    <template #default>
      <div>
        <async-show></async-show>
        <dog-show></dog-show>
      </div>
    </template>
    <template #fallback>
      <h1>Loading ! ...</h1>
    </template>
  </Suspense>
  <button @click="openModal">打开Modal</button>
  <br />
  <h1 v-if="loading">Loading... </h1>
  <img v-if="loaded" :src="result[0].url">
  <h1>x:{{x}}y:{{y}}</h1>
  <Modal :isOpen="modalISOpen" @close-modal="onModalClose">My Modal !!!!</Modal>
  <button @click="click">点击+1</button>
  <button @click="updateGreeting">改变title</button>
</template>

<script lang="ts">
import { ref, computed, reactive, toRefs,
        // onMounted, onUnmounted, onUpdated, onRenderTriggered,
        watch, onErrorCaptured } from "vue";
import useMousePosition from "./hooks/useMousePosition";
import useUrlLoader from "./hooks/useUrlLoader";
import Modal from "@/components/Modal.vue";
import AsyncShow from "@/components/AsyncShow.vue";
import DogShow from "@/components/DogShow.vue";
interface DataProps {
  count: number;
  double: number;
  click: () => void;
  numbers: number[];
  person: { name?: string };
}
// interface DogResult {
//   message: string;
//   status: string;
// }
interface CatResult {
  id: string;
  url: string
  width: number;
  height: number
}
export default {
  name: 'App',
  components:{
    Modal,
    AsyncShow,
    DogShow
  },
  setup(){
    const error = ref(null);
    onErrorCaptured((e: any) => {
      error.value = e;
      return true;
    });
    // const count = ref(0);
    // const double = computed(()=>{
    //   return count.value * 2
    // })
    // const click = ()=>{
    //   count.value++;
    // }
    // onMounted(()=>{
    //   console.log('onMounted')
    // })
    // onUpdated(()=>{
    //   console.log('onUpdated')
    // })
    // onRenderTriggered((ev)=>{
    //   console.log(ev);
    // })
    const data: DataProps = reactive({
      count: 0,
      click: ()=>{ data.count++ },
      double: computed(()=> data.count * 2),
      numbers: [0,1,2],
      person: {},
    })
    const { x, y } = useMousePosition()
    const  { result, loading, loaded } = useUrlLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search?limit=1')
    watch(result,()=>{
      if(result.value){
        console.log('value',result.value[0])
      }
    })
    const greeting = ref('');
    const updateGreeting = ()=>{
      greeting.value += 'Hello!'
    }
    watch([greeting, () => data.count], (val,old)=>{
      console.log(val,old);
      document.title = 'updated'+ greeting.value + data.count
    })
    data.numbers[0] = 5;
    data.person.name = 'viking'
    const refData = toRefs(data)
    const modalISOpen = ref(false)
    const openModal = ()=>{
      modalISOpen.value = true
    }
    const onModalClose = ()=>{
      modalISOpen.value = false
    }
    return {
      ...refData,
      greeting,
      updateGreeting,
      x,y,
      result, loading, loaded,
      modalISOpen,openModal, onModalClose,
      error
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
